import React from 'react'
import { Link } from 'react-router-dom'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../reducers'
import {actions as ProjectAction} from '../../reducers/project'
import utils from '../../common/utils'
import moment from 'moment'
import history from '../../history'
class SubProject extends React.Component {
  componentDidMount() {
    let type = utils.getQueryString('type', window.location.search),
        id = utils.getQueryString('id', window.location.search)
    this.props.get_project_detail(id, type)
  }
  render() {
      const {child: children} = this.props.project.detail

      let _class = (x) => {
        switch (x.status) {
            case 'done':
                return 'a2'
            case 'draft':
                return 'a3'
            case 'pending':
                return 's1'    
            default:
                return ''
        }
      }
      let type = utils.getQueryString('type')
      return(
        <div class="tabs-subp">
        {
          children&&children.map(x => 
            // <Link to={`/project-detail/introduction/publish?type=publish&id=${x.id}`} key={x.id}>
              <div className='my-list'  key={x.id} onClick={()=>history.push(`/project-detail/introduction/publish?type=publish&id=${x.id}&project_id=${x.id}`)}>
                <dl className="clearfix">
                    {/* <dt className="col-xs-4"><img /></dt> */}
                    <dd className="col-xs-12">
                        <div className="p1">{x.title}&nbsp;&nbsp;{x.project_user&&x.project_user.user.nickname}</div>
                        <div className="p2">
                            <span>{moment(x.created_at).format('ll')}</span>
                            {
                                x.status == 'pending' ?
                                    <label class={_class(x)}>
                                        <em>投标</em>
                                        {
                                        utils.getLastTime(x.expect_at).overtime?'超时':'剩余'
                                        }
                                        <tt>{Math.abs(utils.getLastTime(x.expect_at).d)}</tt>天<tt>{Math.abs(utils.getLastTime(x.expect_at).h)}</tt>小时
                                    </label>
                                :   <i class={_class(x)}>
                                        {utils.formatProjectStatus(x)}
                                    </i>
                            }
                            
                        </div>
                    </dd>
                </dl>
              </div>
          )
        }
        </div>

      )
  }
}

function mapStateToProps(state) {
    return {
      project: state.project,
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return  {
      get_children: bindActionCreators(ProjectAction.get_children, dispatch),
      get_project_detail: bindActionCreators(ProjectAction.get_detail, dispatch),
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(SubProject)

//   <div className='sub-list' key={x.id}>
//   <div className='p1'>
//     <span>{x.title}</span>
//     <i>项目类别</i>
//   </div>
//   <div className='p2'>
//     <span>{x.format_status}</span>
//     <i>{moment(x.created_at).format('ll')}</i>
//   </div>
// </div>